<template>
  <el-input
		:class="['sinput', color]"
		:style="{ width: width, marginRight: mr }"
		v-model="value"
		@input="inputChange($event)"
		:disabled="disabled"
		v-bind="$attrs"
	/>
</template>

<script setup lang='ts'>
import { ref,reactive,computed } from 'vue'
type Props = {
    width?: string,
    mr?: string,
    value?:number | string,
    color?:string,
    disabled?:boolean
}
withDefaults(defineProps<Props>(),{
  width:'180px',
  mr:'20px',
  value:'',
  color:'',
  disabled:false
})

const emit = defineEmits(['update:value'])
const inputChange = (val:string | number) =>{
  emit('update:value', val)
}
// const
</script>
<style scoped lang='less'>
.grey {
  font-size: 18px;
  width: 280px;
  :deep(.el-input__inner) {
    background-color: #f3f3f8;
    font-size: 14px;
    border: none;
  }
  :deep(.el-textarea__inner) {
    background-color: #f3f3f8;
    font-size: 14px;
    border: none;
  }
}

</style>